{include file="public/header" select="1" /}
<style>
    .swiper img{
        width: 100%;
        height: 100%;
    }
</style>
<body class="bgc hide-top">
<div class="index-container">
    <img src="/static/index/img/icon45.png" alt="">
    <div class="index-content">
        <div class="pro-list-search index-search">
            <div class="rgt" onclick="load_href('{:url(\'product/search\')}', 2)">
                <img src="/static/index/img/icon43.png" alt="">
                <input type="text" placeholder="请输入搜索内容" readonly>
                <p class="flex-center search_bt">搜索</p>
            </div>
        </div>

        <div class="index-swiepr">
            <div class="swiper">
                <div class="swiper-container carousel">
                    <div class="swiper-wrapper">
                        {foreach name="carousel" item="vo" }
                        <div class="swiper-slide flex-center">
                            <img src="{$vo.images}" alt=""/>
                        </div>
                        {/foreach}
                    </div>
                    <div class="swiper-pagination"></div>
                </div>
            </div>
        </div>

        <div class="index-message">
            <div class="message">
                <i class="layui-icon layui-icon-speaker"></i>
                <div class="message-news">
                    <div class="swiper-wrapper">
                        {foreach name="news" item="vo" }
                        <div class="swiper-slide" onclick="load_href('{:url(\'news/info\')}?id={$vo.id}',2)">
                            {:cut_str($vo.title, 15)}
                        </div>
                        {/foreach}
                    </div>
                </div>
                <a href="{:url('news/index')}">更多<i class="layui-icon layui-icon-right"></i></a>
            </div>
        </div>

        <div class="index-swiepr swiper-nav">
            <div class="swiper" style="height: 100%;">
                <div class="swiper-container carousel-nav">
                    <div class="swiper-wrapper">
                        <div class="swiper-slide flex-center">
                            <ul class="nav-list">
                                {foreach name="cate_list" item="vo" }
                                <li onclick="load_href('{:url(\'product/index\')}?cate_1={$vo.id}',2)">
                                    <p class="flex-center">
                                        <img src="{$vo.icon}" alt="">
                                    </p>
                                    <p>{$vo.title}</p>
                                </li>
                                {/foreach}
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="index-title flex-center" style="color: #FFF;font-weight:bold;">
            <img src="/static/index/img/icon46.png" alt="">热门推荐
            <img src="/static/index/img/icon47.png" alt="">
        </div>

        <ul class="index-list tpl_list"></ul>
    </div>
</div>
{include file="public/nav" select="1" /}
{include file="public/footer" select="1" /}
<script id="template" type="text/html">
    {{# for(var i=0;i<d.data.length ;i++){ }}
    <li>
        <a href="{:url('product/details')}?id={{d.data[i].id}}">
            <p class="flex-center">
                <img src="{{d.data[i].icon}}" alt="">
            </p>
            <div>
                <p class="multi">{{d.data[i].title}}</p>
                <p class="price">￥<span>{{d.data[i].price}}</span></p>
                <p class="flex-layout"><span>￥{{d.data[i].market_price}}</span>销量{{d.data[i].sales}}</p>
            </div>
        </a>
    </li>
    {{# } }}
</script>
<script>
    $(function () {
        getFlow(1, "{:url('product/getList')}?pick=1");
    });

    new Swiper('.carousel', {
        pagination: {
            el: '.swiper-pagination',
        },
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        loop: true
    });

    new Swiper(".message-news", {
        direction: "vertical",
        autoplay: {
            delay: 3000,
            disableOnInteraction: false,
        },
        loop: true,
    });
</script>
</body>
</html>